<template>
  <div
    :style="{ width: props.width, height: props.height }"
    class="bg pl-[10px] text-[18px] font-bold flex justify-between items-center"
  >
    <span class="ls text-white"> {{ states.title }} </span>
    <div class="flex items-center" v-if="states.show">
      <span
        v-for="(item, index) in state.dateList"
        :key="index"
        @click="chooseDate(item)"
        class="text-[13px] mx-[10px] cursor-pointer"
        :class="{
          'text-[#33cdfa]': state.current == item.value,
          'text-[#9f9d9d]': state.current != item.value,
        }"
      >
        {{ item.label }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed } from "vue";
const emit = defineEmits(["chooseDate"]);

let props = defineProps({
  width: {
    type: String,
    default: "400px",
  },
  height: {
    type: String,
    default: "30px",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});
const state = reactive({
  current: "24H",
  dateList: [
    {
      label: "24H",
      value: "24H",
    },
    {
      label: "30天",
      value: "30天",
    },
    {
      label: "12个月",
      value: "12个月",
    },
  ],
});
const states = computed({
  get: () => props.models,
});
const chooseDate = (item) => {
  state.current = item.value;
  emit("chooseDate", item);
};
</script>

<style scoped lang="scss">
.bg {
  z-index: 1000;

  background: rgb(47, 81, 172);
  background: linear-gradient(
    90deg,
    rgba(47, 81, 172, 1) 0%,
    rgba(47, 81, 172, 1) 39%,
    rgba(254, 244, 255, 0) 100%
  );
}
.ls {
  letter-spacing: 2px;
}
</style>
